import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import List from './List';
import Dialog from './Dialog';
import constructMenu from './../../utils/constructMenu';

const Permissions = ({ dispatch, permissions, loading }) => {
    const { list, pagination, userPermissions, modalVisible, menuList } = permissions;

    let allPermissions = constructMenu(menuList);

    const dialogProps = {
        treeData: allPermissions,
        checkedKeys: userPermissions,
        visible: modalVisible,
        maskClosable: false,
        confirmLoading: loading.effects['permissions/update'],
        title: 'Edit The Permissions',
        onCreate (values) {
            dispatch({
                type: 'permissions/update',
                payload: {
                    values
                },
            })
        },
        onCancel () {
            dispatch({
                type: 'permissions/hideModal',
            })
        },
    };

    const listProps = {
        dataSource: list,
        loading: loading.effects['permissions/query'],
        pagination,
        onChange (page) {
            console.log(page);
        },
        onEditItem (item) {
            dispatch({
                type: 'permissions/getPermission',
                payload: {
                    id: item.id,
                    modalVisible: true
                }
            });
        },
    };

    return (
        <div style={{padding: 20,margin: 0}}>
            <List {...listProps} />
            {modalVisible && <Dialog {...dialogProps} />}
        </div>
    )
};

Permissions.propTypes = {
    location: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
};

export default connect(({ permissions, loading }) => ({ permissions, loading }))(Permissions)
